<template>
  <div id="wrap">
    <h1>插槽slot</h1>
    <scu14>
        <!-- <p>我是p标签</p> -->
        <template v-slot:heager>
            <h1>我是头部</h1>
        </template>
        <template v-slot:footer>
            <h1>这是页尾</h1>
        </template>
        <template v-slot="slotProps">
            <h1>这是主题部分</h1>
            <div>子组件传递过来的数据:{{ slotProps.message }}</div>
            <div>子组件传递过来的数据:{{ slotProps.value }}</div>
        </template>
        <template v-slot:[dynamicSlotName]>
            <p>我是动态插槽名称</p>
        </template>
        <template v-slot:abc>

        </template>
    </scu14>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu22',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue'
import scu14 from "./component/scu14.vue";
const dynamicSlotName=ref('dynamicSlotName')
</script>
